@import "_vars";
@import "_mixins";
@import "spinkit/spinkit";
@import "font-awesome/font-awesome";

@import "panel";
@import "sidebar";
@import "grid";
@import "ui";
@import "script";
@import "codemirror";
@import "serverlog";

/*@font-face {
	font-family: Awesome;
	src: url("font/fontawesome-webfont.eot") 
		 url("font/fontawesome-webfont.ttf")
		 url("font/fontawesome-webfont.woff2")
		 url("font/fontawesome-webfont.woff");
}*/

@font-face {
	font-family: ProximaNova;
	src: url("font/proxima_nova-webfont.woff");
}

@font-face {
	font-family: ProximaNovaCondSemi;
	src: url("font/proxima_nova_condensed_semibold-webfont.woff");
}

@font-face {
	font-family: ProximaNovaIt;
	src: url("font/proxima_nova_italic-webfont.woff");
}

@font-face {
	font-family: ProximaNovaCond;
	src: url("font/proxima_nova_condensed-webfont.woff");
}

@font-face {
	font-family: ProximaNovaSemi;
	src: url("font/proxima_nova_semibold-webfont.woff");
}

@font-face {
	font-family: ProximaNovaBold;
	src: url("font/proxima_nova_bold-webfont.woff");
}

pre {
	border: none !important;
	background: none !important;
	color: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
}



.label {
	font-family: ProximaNova;
	font-size: 12px;
}

.label-success {
	background-color: $green;
}

.top-bar {
	z-index: 2;
	position: fixed;
	left: $sidebar-width;
	background-color: white;
	height: 50px;
	width: calc(100% - #{$sidebar-width});
	box-shadow: $panel-shadow;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: {
		left: 20px;
	}
	.item-area {
		height: 100%
	}
	.bar-item {
		height: 100%;
		display: inline-block;
		border-left: solid $line-color 2px;
		padding: {
			top: 14px;
			left: 20px;
			right: 20px;
		}
		cursor: pointer;
	}
}

body {
	font-family: ProximaNova;
	background-color: $bg;
}

.col-collapsed-left {
	padding-left: 0 !important;
}

.col-collapsed-right {
	padding-right: 0 !important;
}

.full-height {
	height: 100%;
}

.ct-series-a .ct-line {
	stroke: $orange;
	stroke-width: 2px;
}

.ct-series-a .ct-area {
	fill: $orange;
}

a {
	color: $orange !important;
}

//.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus
//    color: #555555 !important

th {
	cursor: pointer;
}

td {
	vertical-align: middle !important;
	border: none !important;
}

.page {
	padding: {
		top: 50px;
		bottom: 0px;
	}
	box-sizing: border-box;
	float: right;
}

.container-fluid {
	padding-left: 20px;
	padding-right: 20px;
}

.terminal-page, .system-page, .screen-page, .camera-page, .task-page {
	padding-top: 20px;
	padding-bottom: 20px;
	height: 100%
}

.screen-page.fullscreen {
	min-width: 100%;
    width: 100%;
    min-height: 100%;
    height: 100%;
    position: absolute;
    padding: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 12;
	& .double-header {
		padding-top:2px;
		padding-bottom:0px;
		height:initial;
		margin-bottom: 16px;
	}
}

@media (max-width: $screen-xs-max) {
	.task-memory, .task-memory-head, .task-id, .task-id-head {
		display: none;
	}

	.page {
		width: 100%;
	}

	.cam-box {
		width: 100% !important;
	}
}

@media (max-width: $screen-sm-max) {
	.tab-label, .task-id, .task-id-head {
		display: none;
	}

	li {
		text-align: center;
	}
}

@media (max-width: $screen-sm-max) and (min-width: $screen-sm-min) {
	.page {
		width: calc(100% - #{$sidebar-sm-width});
	}
}

@media (min-width: $screen-md-min) {
	.page {
		width: calc(100% - #{$sidebar-width});
	}
}

@media (min-width: $screen-lg-min) {
	.task-page, .file-page, .settings-page, .plugin-page, .debug-page, .server-log-page {
		max-width: 1000px;
		margin: auto;

		//margin-left: calc((0.5 * (100% - #{$sidebar-width})) - 450px + #{$sidebar-width})
		float: none !important;
	}
	.script-page {
		max-width: 1200px;
		margin: auto;
	}
}

.close-button {
	width: 25pxl;
	cursor: pointer;

	span {
		color: gray;
	}
}

.media:first-child {
	margin-top: 15px !important;
}

.media {
	p {
		margin: 0 0 10px 0;
	}

	.media-body {
		div {
			margin-bottom: 10px;
		}
	}
}

.progress-bar {
	height: 5px;
}

.progress {
	height: 5px;
	margin-bottom: 0px;
}

.icon {
	width: 64px;
	height: 64px;
	text-align: center;
	overflow: hidden;

	img {
		display: inline;
	}
}

.media-heading {
	font-weight: bold;
}

.icon-media {
	max-width: 450px;
	float: left;
}

.burning {
	-webkit-box-shadow: 1px -1px 7px 0px rgba(255, 0, 0, 0.91);
	-moz-box-shadow: 1px -1px 7px 0px rgba(255, 0, 0, 0.91);
	box-shadow: 1px -1px 7px 0px rgba(255, 0, 0, 0.91);
}

.modal-content {
	margin-top: 300px;
}


.login {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 30%;
	width: 40%;
	margin: (-15%) 0 0 -20%;
	text-align: center;
}

.messages {
	width: 300px;
	position: fixed;
	bottom: calc(100% - 10px);
	left: calc(100% - 10px);
}

.user-widget {
	text-align: center;
	margin: 35px 0;
}

.btn-primary, .label-primary {
	background-color: $highlight;
	border-color: darken($highlight, 3%);

	&:hover {
		background-color: darken($highlight, 5%);
		border-color: darken($highlight, 3%);
	}

	&:active {
		background-color: darken($highlight, 10%);
		border-color: darken($highlight, 3%);
	}
}

.btn-primary:active:hover {
	background-color: darken($highlight, 10%);
	border-color: darken($highlight, 3%);
}

.btn-link {
	color: $highlight;
}

.fade-enter {
	opacity: 0.01;
}

.fade-enter.fade-enter-active {
	opacity: 1;
	transition: opacity 300ms ease-in;
}

.fade-leave {
	opacity: 1;
}

.fade-leave.fade-leave-active {
	opacity: 0.01;
	transition: opacity 300ms ease-in;
}

.fade-appear {
	opacity: 0.01;
}

.fade-appear.fade-appear-active {
	opacity: 1;
	transition: opacity 300ms ease-in;
}

.slide-enter, .slide-appear {
	margin-left: -100px;
}

.slide-enter.slide-enter-active, .slide-appear.slide-appear-active {
	margin-left: 0px;
	transition: margin-left 300ms ease-out;
}

.slide-leave {
	margin-left: 0px;
}

.slide-leave.slide-leave-active {
	margin-left: -100px;
	transition: margin-left 300ms ease-out;
}

.upload {
	display: none !important;
}

.plugin-page .form-group {
	width: 400px;
}

.cursor-pointer {
	cursor: pointer;
}

.modal-content {
	margin-top: 0;
}

.modal-body {
	overflow-y: auto;
	max-height: 600px;
}